<template>
  <el-container class="user">
    <el-header>
      <el-menu mode="horizontal" @select="handleSelect">
        <el-menu-item index="home">返回首页</el-menu-item>
        <el-button-group class="btnGroup">
          <el-button round>{{online?user.username:'登录'}}</el-button>
          <el-button v-if="online" round class="btn" @click="toLogout()">登出</el-button>
        </el-button-group>
      </el-menu>
    </el-header>
    <el-container class="container">
      <el-aside width="200px">
        <el-menu @select="handleSelect" :default-active="activePath" class="el-menu-vertical-demo">
          <el-submenu index="user">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="center">仪表盘</el-menu-item>
              <el-menu-item index="setting">账户设置</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="post">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>我的发表</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="edit-post">写文章</el-menu-item>
              <el-menu-item index="my-msg">留言列表</el-menu-item>
              <el-menu-item index="my-post">文章列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="admin">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>管理员</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="manage-post">管理文章</el-menu-item>
              <el-menu-item index="manage-msg">管理留言</el-menu-item>
              <el-menu-item index="manage-user">管理用户</el-menu-item>
              <!--<el-menu-item index="create-notice">新建公告</el-menu-item>-->
              <el-menu-item index="manage-notice">管理公告</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
          <router-view/>
    </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {AccountService, UserService, LocalService} from '@/service/api'

export default {
  data () {
    return {
      activePath: 'center'
    }
  },
  computed: {
    user: function () {
      return this.$store.state.user
    },
    online: function () {
      let ok = UserService.online()
      if (ok) {
        UserService.me()
      }
      return ok
    }
  },
  mounted: function () {
    // UserService.me()
    this.activePath = LocalService.GetIndexPath()
  },
  methods: {
    toLogout: function () {
      AccountService.logout()
      this.$router.push({path: '/home'})
    },
    handleSelect: function (key, keyPath) {
      this.activePath = key
      LocalService.SaveIndexPath(key)
      switch (key) {
        case 'home':
          this.$router.push({path: '/'})
          break
        case 'my-post':
          this.$router.push({path: '/user/post/me'})
          break
        case 'manage-post':
          this.$router.push({path: '/user/post/all'})
          break
        case 'my-msg':
          this.$router.push({path: '/user/msg/me'})
          break
        case 'manage-msg':
          this.$router.push({path: '/user/msg/all'})
          break
        case 'manage-user':
          this.$router.push({path: '/user/list'})
          break
        case 'manage-notice':
          this.$router.push({path: '/user/notice-list'})
          break
        default:
          this.$router.push({path: '/user/' + key})
      }
    }
  }
}
</script>

<style scoped>
  .btnGroup{
    height: 100%;
    float:right;
    margin-left:10%;
  }

  .container {
    margin-top: 10px;
  }
</style>
